<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>立即预约</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="__PUBLIC__/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/app.css" />
    <link href="__PUBLIC__/css/mobiscroll_002.css" rel="stylesheet" type="text/css">    <!--日期css-->
    <link href="__PUBLIC__/css/mobiscroll.css" rel="stylesheet" type="text/css">			<!--日期css-->
    <link href="__PUBLIC__/css/mobiscroll_003.css" rel="stylesheet" type="text/css">		<!--日期css-->
    <style>
        .w36 {
            width: 40% !important;
        }
        .mui-input-row .mui-btn{padding: 10px 0}
        .mb20 {
            margin-bottom: 0px!important;
        }
        .mui-btn-sz{margin-left:10%}
        .hairPieceInfor{display: none}   /*发件信息隐藏*/
        .receivingInfor{display: none}   /*收件信息隐藏*/
        .mui-input-row label{padding: 11px 0 11px 0px}
    </style>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-3.2.1.min.js"></script>
    <script src="__PUBLIC__/js/mobiscroll_002.js" type="text/javascript"></script>      <!--选择起租日期的js-->
    <script src="__PUBLIC__/js/mobiscroll_004.js" type="text/javascript"></script>		<!--选择起租日期的js-->
    <script src="__PUBLIC__/js/mobiscroll.js" type="text/javascript"></script>				<!--选择起租日期的js-->
    <script src="__PUBLIC__/js/mobiscroll_003.js" type="text/javascript"></script>		<!--选择起租日期的js-->
    <script src="__PUBLIC__/js/mobiscroll_005.js" type="text/javascript"></script>		<!--选择起租日期的js-->
    <script src="__PUBLIC__/js/yuyue.js"></script>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a style="color: black" href="/index.php?g=YunCangChu&m=Time&a=detail&id={:I('cangku')}&tel=<?php echo I('tel');?>" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">立即预约</h1>
</header>
<div class="mui-content">
    <form id='login-form' class="mui-input-group" autoscroll="false">
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wutype-icon  mui-pull-left"></i>
            <label class="pl40">存放物品类别</label>
            <select id="wu" class="mui-btn mui-btn-block w36 mt5">
                <option  value="0">请选择物品类别</option>
                <foreach name="data" item="vo">
                    <option value="{$vo.id}">{$vo.name}</option>
                </foreach>
            </select>
        </div>
       <!-- <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-cktype-icon  mui-pull-left"></i>
            <label class="pl40">选择仓库类型</label>
            <select id="x" class="mui-btn mui-btn-block w36 mt5">
                <option  _type="0" value="0">请选择仓库类型</option>
                <foreach name="type" item="vo">
                    <option _type="{$vo.times}" value="{$vo.id}">{$vo.name}</option>
                </foreach>
            </select>
            &lt;!&ndash;<a class="mui-navigate-right"></a>	&ndash;&gt;
        </div>-->
        <if condition="$times eq 1">
            <div  class="mui-input-row h50" >
                <i class="mui-yuyue-icon mui-time-icon  mui-pull-left"></i>
                <label class="pl40">起租时间</label>
                <input _class="times" onfocus="this.blur();" type="text" id="appDate" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择起租时间">
            </div>
            <else/>
            <div  class="mui-input-row h50" >
            <i class="mui-yuyue-icon mui-time-icon  mui-pull-left"></i>
            <label class="pl40">起租时间</label>
            <input _class="times" onfocus="this.blur();" type="text"  id="appDateTime" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择起租时间">
        </div>
        </if>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-zq-icon  mui-pull-left"></i>
            <label class="pl40">租期</label>
            <input id="zuqi" style="text-align: right" maxlength="10" type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入租期">
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-mianji-icon  mui-pull-left"></i>
            <label class="pl40">长和宽(mm)</label>
            <!--<input id='' type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入租用面积">-->
            <input style="text-align: right" maxlength="10" type="text" class="mt5 mui-input-clear mui-input mui-yuuye" value="{$time}cm²">
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-jiazhi-icon  mui-pull-left"></i>
            <label class="pl40">声明价值</label>
            <input value="0" id="jiazhi" pattern="[0-9]*" style="text-align: right" maxlength="11"  type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="价值">
            <!--<a class="mui-navigate-right"></a>	-->
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-number-icon  mui-pull-left"></i>
            <label class="pl40">包装数量</label>
            <input id="shuliang" value="1" pattern="[0-9]*" style="text-align: right" maxlength="11"  type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入包装数量">
        </div>
        <div class="mui-input-row h50" style="dis">
            <i class="mui-yuyue-icon mui-cftype-icon  mui-pull-left"></i>
            <label class="pl40">存放类型</label>
            <select id="cunfang" class="mui-btn mui-btn-block w36 mt5 storageType">
                <option value="item-1">自存</option>
                <option value="item-2">上门取货</option>
            </select>
            <!--<a class="mui-navigate-right"></a>	-->
        </div>
    </form>
    <div class="mui-jfinfo hairPieceInfor">发件信息</div>
    <form  class="mui-input-group hairPieceInfor">
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-peoples-icon  mui-pull-left"></i>
            <label class="pl40">发件人</label>
            <input id='fajianren' type="text" style="text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入发件人">
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wutime-icon  mui-pull-left"></i>
            <label class="pl40">取件起始时间</label>
            <input onfocus="this.blur();" type="text"  id="startStartTime" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择起租日期">
            <!--<a class="mui-navigate-right"></a>	-->
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wutime-icon  mui-pull-left"></i>
            <label class="pl40">取件结束时间</label>
            <input onfocus="this.blur();" type="text"  id="endtStartTime" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择起租日期">
            <!--<a class="mui-navigate-right"></a>	-->
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wuphone-icon  mui-pull-left"></i>
            <label class="pl40">联系电话</label>
            <input id="ShpMobile" style="text-align: right" maxlength="11" id='' type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入联系电话">
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wuaddress-icon  mui-pull-left"></i>
            <label class="pl40">发件地区</label>
            <div style="width: 4rem;float: left;margin-left: 2rem">
                <select id="city1" style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
                    <option value="0">选择省</option>
                    <foreach name="citys.ReturnData" item="vo">
                        <option value="{$vo.ProvID}">{$vo.Prov}</option>
                    </foreach>
                </select>
            </div>
            <div style="width:4rem;float: left;">
                <select id="city2" style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
                    <option value="item-1">选择市</option>
                </select>
            </div>
            <div style="width: 3.5rem;float: left;">
                <select id="city3" style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
                    <option value="item-1">选择区</option>
                </select>
            </div>
            <!--<a class="mui-navigate-right"></a>	-->
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wuaddressinfo-icon  mui-pull-left"></i>
            <label class="pl40">详细地址</label>
            <input style="text-align: right" id='ShpAddr' type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入详细地址">
        </div>

    </form>
    <div class="mui-input-row h50" >
        <i class="mui-yuyue-icon mui-wutype-icon  mui-pull-left"></i>
        <label class="pl40">提取类型</label>
        <select id="tiquleixing" class="mui-btn mui-btn-block w36 mt5 extractionType">
            <option value="item-1">自取</option>
            <option value="item-2">送货上门</option>
        </select>
        <!--<a class="mui-navigate-right"></a>	-->
    </div>
    <div class="mui-jfinfo receivingInfor">收件信息</div>
    <form id='' class="mui-input-group receivingInfor">
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-peoples-icon  mui-pull-left"></i>
            <label class="pl40">收件人</label>
            <input style="text-align: right" id='shoujianren' type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入收件人">
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wuphone-icon  mui-pull-left"></i>
            <label class="pl40">联系电话</label>
            <input id="lianxidianhua" style="text-align: right" maxlength="11" id='' type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入联系电话">
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wuaddress-icon  mui-pull-left"></i>
            <label class="pl40">收件地区</label>
            <div style="width: 4rem;float: left;margin-left: 1rem">
                <select id="city4" style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
                    <option value="0">选择省</option>
                    <foreach name="citys.ReturnData" item="vo">
                        <option value="{$vo.ProvID}">{$vo.Prov}</option>
                    </foreach>
                </select>
            </div>
            <div style="width:4rem;float: left;">
                <select id="city5" style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
                    <option value="item-1">选择市</option>
                </select>
            </div>
            <div style="width: 4rem;float: left;">
                <select id="city6" style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
                    <option value="item-1">选择区</option>
                </select>
            </div>
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wuaddressinfo-icon  mui-pull-left"></i>
            <label class="pl40">详细地址</label>
            <input id="ConsAddr" style="text-align: right" type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入联系电话">
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wutime-icon  mui-pull-left"></i>
            <label class="pl40">起始派送时间</label>
            <input onfocus="this.blur();" type="text"  id="startDeliveryTime" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择派送时间">
            <!--<a class="mui-navigate-right"></a>	-->
        </div>
        <div class="mui-input-row h50">
            <i class="mui-yuyue-icon mui-wutime-icon  mui-pull-left"></i>
            <label class="pl40">结束派送时间</label>
            <input onfocus="this.blur();" type="text"  id="endtDeliveryTime" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择派送时间">
            <!--<a class="mui-navigate-right"></a>	-->
        </div>
    </form>
    <div class="mui-xieyi" style="margin-bottom: 6rem">
        <input id="checkbox" name="checkbox" value="Item 2" type="checkbox" checked="">
        您已经确认<span>《百福云仓库用户注册协议》</span>
    </div>
    <div style="position: fixed;z-index: 1000;bottom: 2rem;left: 0;width: 100%">
        <button id="queren" type="button" class="mb20 mui-btn-sz">确认下单</button>
    </div>
</div>
</body>
<script>
    $(function(){
        var currYear = (new Date()).getFullYear();
        var opt={};
        opt.date = {preset : 'date'};
        opt.datetime = {preset : 'datetime'};
        opt.time = {preset : 'time'};
        opt.default = {
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式
            mode: 'scroller', //日期选择模式
            dateFormat: 'yyyy-mm-dd',
            lang: 'zh',
            showNow: true,
            nowText: "今天",
            startYear: currYear - 10, //开始年份
            endYear: currYear + 10 //结束年份
        };

        $("#appDate").mobiscroll($.extend(opt['date'], opt['default']));  //选择起租日期，不带时分
        var optDateTime = $.extend(opt['datetime'], opt['default']);
        var optTime = $.extend(opt['time'], opt['default']);
        $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);     //选择起租日期，带时分

        $("#startStartTime").mobiscroll(optDateTime).datetime(optDateTime);    //选择取件起始日期，带时分
        $("#endtStartTime").mobiscroll(optDateTime).datetime(optDateTime);    //选择取件起始日期，带时分

        $("#startDeliveryTime").mobiscroll(optDateTime).datetime(optDateTime);    //选择派送起始日期，带时分
        $("#endtDeliveryTime").mobiscroll(optDateTime).datetime(optDateTime);    //选择派送起始日期，带时分

        $(".storageType").change(function () {
            if($(".storageType").val() == "item-2"){
                $(".hairPieceInfor").show();
            }else if($(".storageType").val() == "item-1"){
                $(".hairPieceInfor").hide();
                $(".receivingInfor").hide();
            }
        });
        $(".extractionType").change(function () {
            if($(".extractionType").val() == "item-2"){
                $(".receivingInfor").show();
            }else if($(".extractionType").val() == "item-1"){
                $(".receivingInfor").hide();
            }
        })

    })
</script>
</html>
<script>
    //城市选择
    $('#city1').change(function()
        {
            var id = $(this).val()
            if(id == 0)
            {
                str='<option value="0">选择市</option>';
                $('#city2').html(str)
                return false
            }
            $.post("{:U('Storehouse/get_city')}",{id:id},function (rel) {
                str='<option value="0">选择市</option>';
                $.each(rel, function(key, val) {
                    str+='<option value="'+val.CityID+'">'+val.City+'</option>';
                });
                $('#city2').html(str)
            })
        }
    )
    //城市选择
    $('#city2').change(function()
        {
            var cid = $('#city1').val()
            var id = $(this).val()
            if(id == 0)
            {
                str='<option value="0">选择区</option>';
                $('#city3').html(str)
                return false
            }
            $.post("{:U('Storehouse/get_city1')}",{cid:cid,id:id},function (rel) {
                str='<option value="0">选择区</option>';
                $.each(rel, function(key, val) {
                    str+='<option value="'+val.ID+'">'+val.Name+'</option>';
                });
                $('#city3').html(str)
            })
        }
    )
    //城市选择
    $('#city4').change(function()
        {
            var id = $(this).val()
            if(id == 0)
            {
                str='<option value="0">选择市</option>';
                $('#city5').html(str)
                return false
            }
            $.post("{:U('Storehouse/get_city')}",{id:id},function (rel) {
                str='<option value="0">选择市</option>';
                $.each(rel, function(key, val) {
                    str+='<option value="'+val.CityID+'">'+val.City+'</option>';
                });
                $('#city5').html(str)
            })
        }
    )
    //城市选择
    $('#city5').change(function()
        {
            var cid = $('#city4').val()
            var id = $(this).val()
            if(id == 0)
            {
                str='<option value="0">选择区</option>';
                $('#city6').html(str)
                return false
            }
            $.post("{:U('Storehouse/get_city1')}",{cid:cid,id:id},function (rel) {
                str='<option value="0">选择区</option>';
                $.each(rel, function(key, val) {
                    str+='<option value="'+val.ID+'">'+val.Name+'</option>';
                });
                $('#city6').html(str)
            })
        }
    )
</script>